import React from 'react'
import '@/assets/index.scss'

export default class ToDolist extends React.Component {
  constructor (props) {
    super(props)

    this.state = {
      doning: [
        { id: 1, task: '学习使我快乐' },
        { id: 2, task: '运动使我快乐' },
        { id: 3, task: '音乐使我快乐' }
      ],
      doned: [],
      task: '',
      doningCount: 1,
      donedCount: 1
    }
  }

  componentDidMount () {
    this.init()
  }

  init () {
    // 获取正在执行的任务的和完成任务的个数
    this.setState(
      { 
        doningCount: this.state.doning.length,
        donedCount: this.state.doned.length
      }
    )
  }

  // 添加任务
  addTask (e) {
    let { doning } = this.state
    if (e.keyCode === 13) {
      if (!e.target.value) return alert('请输入内容！')
      this.setState({
        // doning: [...doning, { id: Date.now(), task: this.state.task }],
        doning: [...doning, { id: Date.now(), task: e.target.value }],
        task: ''
      }, () => this.init())
    }
  }

  // 完成任务
  completeTask (item) {
    let { doning, doned } = this.state

    doning.map((val, i) => {
      if (val.id === item.id) {
        doning.splice(i, 1)
        this.setState({
          doned: [...doned, item]
        }, () => this.init())
      }
    })
  }

  // 编辑
  edit (task, e) {
    e.target.nextElementSibling.style.display = 'inline-block'
    e.target.nextElementSibling.value = task
    e.target.nextElementSibling.focus()
  }

  // 失去焦点
  editd (task, item, e) {
    let { doning } = this.state
    e.target.style.display = 'none'
    e.target.previousElementSibling.innerText = task
    doning.map(val => {
      if (val.id === item.id) item.task = task
    })
  }

  // 删除
  remove (item) {
    let { doning } = this.state

    doning.map((val, i) => {
      if (val.id === item.id) {
        doning.splice(i, 1)
        this.setState({
          doning: [...doning]
        }, () => this.init())
      }
    })
  }

  // 拖拽投放，当前的拖放的元素
  drag (id, e) {
    // 保存当前拖放的元素
    e.dataTransfer.setData('id', id)
  }

  // 完成拖拽，拖放的元素放到目标位置
  drop (id, e) {
    let { doning } = this.state
    let index = parseInt(e.dataTransfer.getData('id'))
    let current, target, temp = {}

    // 保存当前拖拽元素的id值
    doning.map((item, cur) => {
      if (item.id === index) {
        current = cur
      } 
    })

    // 保存目标投放到的元素的id值
    doning.map((item, tar) => {
      if (item.id === id) {
        target = tar
      }
    })

    // 对拖拽的元素进行位置的互换
    temp = JSON.parse(JSON.stringify(doning[current]))
    doning[current] = JSON.parse(JSON.stringify(doning[target]))
    doning[target] = JSON.parse(JSON.stringify(temp))

    this.setState({
      doning: [...doning]
    })
  }

  render () {
    let { doning, doned } = this.state

    return (
      <div className="container">
        <header>
          <input
            className="inputText"
            type="text"
            placeholder='请输入任务'
            value={ this.state.task }
            onChange={ e => this.setState({ task: e.target.value }) }
            onKeyUp={ e => this.addTask(e) }
          />
        </header>
        <main>
          {/* 正在进行的任务 */}
          <div className="doing-main">
            <div className="header">
              <h3>正在进行</h3>
              <span>{ this.state.doningCount }</span>
            </div>
            {/* 任务内容 */}
            {/* 
              实现拖拽的实现条件：
              1、给要实现拖拽的元素设置draggable='true'
              2、为拖拽元素添加dragstart事件、用于保存数据
              3、为拖拽元素添加dragover事件、用于阻止默认行为
              4、为拖拽元素添加drop事件、用于完成拖放的元素
            */}
            <ul className="doning">
              {
                doning.map(item => (
                  <li 
                    key={ item.id }
                    draggable='true'
                    onDragStart={ e => this.drag(item.id, e) }
                    onDragOver={ e => e.preventDefault() }
                    onDrop={ e => this.drop(item.id, e) }
                  >
                    <input 
                      type="checkbox"
                      onClick={ () => this.completeTask(item) }
                    />
                    <span 
                      onClick={ (e) => this.edit(item.task, e) }
                    >
                      { item.task }
                    </span>
                    <input 
                      type="text"
                      onChange={ () => {} }
                      onBlur={ e => this.editd(e.target.value, item, e) }
                    />
                    <div className='remove' onClick={ () => this.remove(item) }>
                      <i><u></u></i>
                    </div>
                  </li> 
                ))
              }
            </ul>
          </div>
          {/* 正在进行的任务 */}

          {/* 已经完成的任务 */}
          <div className="complete">
            <div className="header">
              <h3>已经完成</h3>
              <span>{ this.state.donedCount }</span>
            </div>
            <ul className="doned">
              {
                doned.map(item => (
                  <li key={ item.id }>
                    <input type="checkbox" checked onChange={ () => {} }/>
                    <span>{ item.task }</span>
                    {/* <input type="text"/> */}
                    <div className='remove'>
                      <i><u></u></i>
                    </div>
                  </li> 
                ))
              }
            </ul>
          </div>
          {/* 已经完成的任务 */}
        </main>
      </div>
    )
  }
}